<%@ page language="java" import="java.util.*"
	contentType="text/html; charset=utf-8"%>
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>红豆芝麻兼职</title>
<meta name="description" content="EmployerManager">
<meta name="keywords" content="Manager">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="icon" type="image/png" href="../assets/i/favicon.png">
<link rel="apple-touch-icon-precomposed"
	href="../assets/i/app-icon72x72@2x.png">
<link rel="stylesheet" href="../assets/css/amazeui.min.css" />
<link rel="stylesheet" href="../assets/css/admin.css">
<link rel="stylesheet" href="../assets/css/custom.css" />

<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/custom.js"></script>
<script src="../assets/js/amazeui.min.js"></script>
<script src="../assets/js/jquery.cropit.js"></script>


<style>
.cropit-preview {
	background-color: #f8f8f8;
	background-size: cover;
	border: 5px solid #ccc;
	border-radius: 3px;
	margin-top: 7px;
	width: 250px;
	height: 250px;
}

.cropit-preview-image-container {
	cursor: move;
}

.cropit-preview-background {
	opacity: .2;
	cursor: auto;
}

.image-size-label {
	margin-top: 10px;
}

input, .export {
	/* Use relative position to prevent from being covered by image background */
	position: relative;
	z-index: 10;
	display: block;
}

button {
	margin-top: 10px;
}
</style>
</head>

<body>

	<div class="image-editor">
		<input type="file" class="cropit-image-input">
		<div class="cropit-preview"></div>
		<div class="image-size-label">Resize image</div>

		<div class="controls-wrapper">
			<div class="rotation-btns">
				<span class="icon icon-rotate-left rotate-ccw-btn"></span><span
					class="icon icon-rotate-right rotate-cw-btn"></span>
			</div>
			<div class="slider-wrapper">
				<span class="icon icon-image small-image"></span><input type="range"
					class="cropit-image-zoom-input custom" min="0" max="1" step="0.01"><span
					class="icon icon-image large-image"></span>
			</div>
		</div>
		<button class="export">Export</button>
	</div>
	<%@ include file="../commoms/alert.txt"%>
	<%@ include file="../commoms/comfirmModel.txt"%>
	<script>
		$(function() {
			var href = '/Login.jsp';
			var upload = '';
			
				if (getQueryString('page') == 1) {
					href = '/EmployeeInfo.jsp';
					upload = '/finishEELogo.do'
				} else if (getQueryString('page') == 2) {
					href = '/EmployerInfo.jsp';

					upload = '/finishERLogo.do'
				}
			

			$('.image-editor').cropit({
				exportZoom : 1.25,
				imageBackground : true,
				imageBackgroundBorderWidth : 20,
				imageState : {
					src : 'http://lorempixel.com/500/400/',
				},
			});

			$('.rotate-cw').click(function() {
				$('.image-editor').cropit('rotateCW');
			});
			$('.rotate-ccw').click(function() {
				$('.image-editor').cropit('rotateCCW');
			});

			$('.export').click(
					function() {
						var imageData = $('.image-editor').cropit('export');
						if (upload != '') {
							myAjax(upload, {
								'img' : imageData.substring(imageData
										.indexOf(',') + 1, imageData.length)
							}, function(data) {
								if (data.state == 'success') {
									window.location.href = href;
								}
								else
									myAlert('提示', '请重试！');
							});
						}
						else 
							window.location.href = '/Login.jsp';
					});
		});
		function getQueryString(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
			var r = window.location.search.substr(1).match(reg);
			if (r != null)
				return unescape(r[2]);
			return null;
		}
	</script>


</body>
</html>
